<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    四大名著：
    <ul>
        <li v-for="(e,i) in sdmz">{{i}}------{{e}}</li>
    </ul>
    部门列表：
    <table cellspacing="0" cellpadding="0" border="1">
        <thead>
        <tr>
            <td>序号</td>
            <td>名称</td>
            <td>编号</td>
            <td>操作</td>
        </tr>
        </thead>
        <tr v-for="d in depts">
            <td>{{d.id}}</td>
            <td>{{d.name}}</td>
            <td>{{d.sn}}</td>
            <td>编辑 删除</td>
        </tr>
    </table>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            sdmz: ["三国演义","水浒传","红楼梦","西游记"],
            depts:[
                {id: 1, name:"划水部",sn:"hsb"},
                {id: 2, name:"吃饭",sn:"cfb"},
                {id: 3, name:"旅游部",sn:"lyb"},
            ]
        }
    })
</script>
</body>
</html>